<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/icon2.png" alt="">
      </div>
      <h2>吨水电耗</h2>
      <div class="more" @click="getMore">
        <h2>查看更多</h2>
        <img src="@/assets/img/add.png" alt="">
      </div>
    </div>
    <div class="loss_cont">
      <div class="loss_btn">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="日供水量" name="fd_water_cnt"></el-tab-pane>
          <el-tab-pane label="日耗电量" name="fd_elec_cnt"></el-tab-pane>
          <el-tab-pane label="每吨水耗电量" name="elec_water_per"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- <div class="loss_bend">
        <div id="main2" style="width: 100%;height:100%;"></div>
      </div> -->
      <div class="loss_echart">
        <div id="main" style="width: 100%;height:100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import TWEEN from '@tweenjs/tween.js'
import * as api from '@/assets/utils/api.js'
export default {
  name: 'chart',
  data() {
    return {
      activeName: 'fd_water_cnt',
      dt: [0, 0, 0, 0, 0, 0, 0],
      siteId: null,
      siteNo: null,
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['同比', '环比'],
          bottom: '5%',
          height: '100%',
          itemHeight: 5,
          itemWidth: 10,
          textStyle: {
            color: ['#41d5ff', '#29dc8d'],
            fontSize: '0.1rem'
          }
        },
        grid: {
          top: '10%',
          right: '10%',
          left: '13%',
          bottom: '30%',
          // x: '0%',//x 偏移量
          // y: '5%', // y 偏移量
          // width: '100%', // 宽度
          // height: '70%'
        },
        xAxis: {
          // show: false,
          data: [0, 0, 0, 0, 0, 0, 0],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#38e8fb'
            },
            nameTextStyle: {
              overflow: 'breakAll'
            }
          },

          axisLine: {
            show: true,
            lineStyle: {
              color: '#80c7e0'
            }
          },
        },
        yAxis: [
          {
            type: 'value',
            position: 'left',
            max(value) {
              return Math.ceil(value.max / 100) * 100
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#55b9b4'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#38e8fb'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#80c7e0'
              }
            },
          },
          {
            type: 'value',
            position: 'right',
            show: true,
            // axisLabel: {
            //   interval: 0,
            // },
            max: 100,
            min: -100,
            splitNumber: 2,
            splitLine: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#80c7e0'
              }
            },
          },
        ],
        series: [
          {
            type: 'custom',
            diffChildrenByName: true,
            renderItem(params, api) {
              let location = api.coord([api.value(0), api.value(1)])
              return {
                type: 'group',
                children: [{
                  type: 'MyCubeRect',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    width: window.innerWidth / 80,
                    height: window.innerWidth / 80 / 3
                  },
                  style: {
                    stroke: '#80c7e0',
                    fill: '#40a4de'
                  }
                },
                {
                  type: 'MyCubeShadow',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    width: window.innerWidth / 80,
                    height: window.innerWidth / 80 / 3
                  },

                  style: {
                    stroke: '#80c7e0',
                    fill: '#056aa6'
                  }
                },
                {
                  type: 'CubeBg',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    width: window.innerWidth / 80,
                    height: window.innerWidth / 80 / 3
                  },
                  style: {
                    stroke: '#80c7e0',
                    fill: 'rgba(0,60,114,0.7)'
                  }
                },
                {
                  type: 'CubeBgTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    width: window.innerWidth / 80,
                    height: window.innerWidth / 80 / 3
                  },
                  style: {
                    stroke: '#80c7e0',
                    fill: 'rgba(64,163,222,0.7)'
                  }
                },
                ]
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: '同比',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#41d5ff',
                lineStyle: {
                  color: '#41d5ff'
                }
              }
            },
            data: [],
            showSymbol: true
          },
          {
            name: '环比',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#29dc8d',
                lineStyle: {
                  color: '#29dc8d'
                }
              }
            },
            data: [],
            showSymbol: true
          }
        ]
      },
      myChart: {}, // 柱状
      // myChart2: {} // 折线
    }
    // console.log(this.lineYear, this.lineLink)
  },
  async created() {
    // this.setLabel()
    this.getData(this.siteId, this.siteNo)
  },
  mounted() {
    this.initChart()

    //根据窗口变化自动调节图表大小
    // const that = this
    window.onresize = () => {
      this.myChart.resize()
      // this.myChart2.resize()
    }
    //TWEEN 实时更新
    let ani = () => {
      // eslint-disable-next-line no-undef
      TWEEN.update()
      window.requestAnimationFrame(ani)
    }
    ani()
  },
  methods: {
    // 点击查看更多
    getMore() {
      this.$emit('more2', 2)
    },
    changeData(value, value2) {
      this.siteId = Number(value)
      this.siteNo = Number(value2)
      // console.log(value)
      this.getData(this.siteId, this.siteNo)
    },
    async getData(idNum, idNum2) {
      // 接口参数
      const id = { tenantid: 1128, siteId: idNum, siteNo: idNum2 }
      const res = await api.loss(id)
      let dt = res.data[this.activeName]

      for (let i = 0; i < dt.fd_datas.length; i++) {
        dt.fd_datas[i] = dt.fd_datas[i].substring(5, dt.fd_datas[i].length)
      }

      let target = []
      if (this.activeName == 'fd_water_cnt') {
        target = dt.water_cnt
        this.option.series[1].data = dt.water_cnt_year
        this.option.series[2].data = dt.water_cnt_chain
      } else if (this.activeName == 'fd_elec_cnt') {
        target = dt.elec_cnt
        this.option.series[1].data = dt.elec_cnt_year
        this.option.series[2].data = dt.elec_cnt_chain
      } else if (this.activeName == 'elec_water_per') {
        target = dt.per
        this.option.series[1].data = dt.per_year
        this.option.series[2].data = dt.per_chain
      }

      // this.drawLine()

      this.option.xAxis.data = dt.fd_datas

      let max_temp = Math.ceil(Math.max(...target) / 100) * 100

      if (this.option.yAxis.max && max_temp < this.option.yAxis.max) {
        this.dt = [0, 0, 0, 0, 0, 0, 0]
      }

      this.option.yAxis.max = Math.ceil(Math.max(...target) / 100) * 100

      new TWEEN.Tween(this.dt).to(target, 1000).easing(TWEEN.Easing.Cubic.Out).onUpdate((dt) => {
        this.option.series[0].data = dt
        this.myChart.setOption(this.option)
      }).onComplete(() => {
        this.dt = target
      }).start()

    },
    handleClick() {
      // console.log(tab, event)
      // console.log(this.siteId, this.siteNo)
      this.getData(this.siteId, this.siteNo)
    },

    // 柱状图图表初始化
    initChart() {
      this.myChart = this.$echarts.init(document.getElementById('main'))

      const MyCubeRect = this.$echarts.graphic.extendShape({
        shape: {
          width: 30,
          height: 10,
        },
        buildPath(ctx, shape) {
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          ctx.moveTo(shape.x, shape.y)
          ctx.lineTo(shape.x, xAxisPoint[1])
          ctx.lineTo(shape.x - shape.width / 2, xAxisPoint[1] - shape.height)
          ctx.lineTo(shape.x - shape.width / 2, shape.y - shape.height)
          ctx.closePath()
        }
      })

      const MyCubeShadow = this.$echarts.graphic.extendShape({
        shape: {
          width: 30
        },
        buildPath(ctx, shape) {
          const api = shape.api
          const xAxisPoint = api.coord([shape.xValue, 0])
          ctx.moveTo(shape.x, shape.y)
          ctx.lineTo(shape.x - shape.width / 2, shape.y - shape.height)
          ctx.lineTo(shape.x, shape.y - shape.height * 2)
          ctx.lineTo(shape.x + shape.width / 2, shape.y - shape.height)
          ctx.lineTo(shape.x, shape.y)

          ctx.moveTo(shape.x, shape.y)
          ctx.lineTo(shape.x + shape.width / 2, shape.y - shape.height)
          ctx.lineTo(shape.x + shape.width / 2, xAxisPoint[1] - shape.height)
          ctx.lineTo(shape.x, xAxisPoint[1])
          ctx.closePath()
        }
      })

      const CubeBg = this.$echarts.graphic.extendShape({
        shape: {
          width: 30
        },
        buildPath(ctx, shape) {
          ctx.moveTo(shape.x, shape.height * 2)
          ctx.lineTo(shape.x + shape.width / 2, shape.height)
          ctx.lineTo(shape.x + shape.width / 2, shape.y - shape.height)
          ctx.lineTo(shape.x, shape.y)
          ctx.lineTo(shape.x, shape.height * 2)

          ctx.moveTo(shape.x, shape.height * 2)
          ctx.lineTo(shape.x, shape.y)
          ctx.lineTo(shape.x - shape.width / 2, shape.y - shape.height)
          ctx.lineTo(shape.x - shape.width / 2, shape.height)
          ctx.closePath()
        }
      })

      const CubeBgTop = this.$echarts.graphic.extendShape({
        shape: {
          width: 30
        },
        buildPath(ctx, shape) {
          ctx.moveTo(shape.x, 0)
          ctx.lineTo(shape.x + shape.width / 2, shape.height)
          ctx.lineTo(shape.x, shape.height * 2)
          ctx.lineTo(shape.x - shape.width / 2, shape.height)
          ctx.closePath()
        }
      })

      this.$echarts.graphic.registerShape('MyCubeRect', MyCubeRect)
      this.$echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow)
      this.$echarts.graphic.registerShape('CubeBg', CubeBg)
      this.$echarts.graphic.registerShape('CubeBgTop', CubeBgTop)

      this.myChart.setOption(this.option)
    },
    // 折线图
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart2 = this.$echarts.init(document.getElementById('main2'))

      this.myChart2.setOption({
        legend: {
          orient: 'vertical',
          data: ['同比', '环比'],
          right: '2%',
          y: '0%',
          height: '100%',
          itemHeight: 5,
          itemWidth: 10,
          textStyle: {
            color: '#fff',
            fontSize: '0.1rem'
          }
        },
        grid: {
          // left: '3%',
          // right: '4%',
          bottom: '20%',
          top: '20%',
          width: '73%',
          height: '100%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [1, 2, 3, 4, 5],
          show: false,
        },
        yAxis: {
          type: 'value',
          position: 'right',
          show: true,
          // axisLabel: {
          //   interval: 0,
          // },
          max: 100,
          min: -100,
          splitNumber: 2,
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#80c7e0'
            }
          },
        },
        series: [
          {
            name: '同比',
            type: 'line',
            data: this.lineYear,
            showSymbol: false
          },
          {
            name: '环比',
            type: 'line',
            data: this.lineLink,
            showSymbol: false
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .modular {
//   .loss_cont {
//     height: 2.8rem;

//     .main {
//       width: 100%;
//       height: 100%;
//     }
//   }
// }
.modular {

  .loss_cont {
    width: 100%;
    height: 2.9rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .loss_btn {
      width: 100%;
      height: 28%;
      display: flex;
      justify-content: center;
    }

    // .loss_bend {
    //   width: 100%;
    //   height: 17%;
    // }

    .loss_echart {
      width: 100%;
      height: 65%;

      .main {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
